let path = require('path');
let HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    devServer: {//开发服务器的配置
        port: 3000,//端口
        progress: true,//进度
        contentBase: "./build",//根目录
        open: true,//自动打开默认浏览器
        compress: true//传输gzip
    },
    mode: 'development',//模式 默认两种模式 production development
    entry: './src/index.js',//入口
    output: {
        filename: 'bundle.[hash:5].js',//打包后的文件
        path: path.resolve(__dirname, 'build')//路径必须一个绝对路径
    },
    plugins: [
        new HtmlWebpackPlugin(
            {
                template: './src/index.html',//模板路径
                filename: "index.html",//输出文件名
                minify: {
                    removeAttributeQuotes: true,//去除双引号
                    collapseWhitespace: true, //打包成一行
                },
                hash: true //文件？hash戳
            }
        )
    ],
    module: {//模块
        rules: [//规则 css-loader支持@import语法
            //style-loader 插入到head标签中
            //loader的特点 希望单一
            //loader的用法 字符串只一个loader用
            //多个loader需要[]
            //loader的顺序 ，默认是从右向左执行 从下向上执行
            //loader可以写成对象方式
            {
                test: /\.css$/,
                use: [{
                    loader: 'style-loader',
                }, 'css-loader']
            },
            {
                //
                test: /\.less/,
                use: [{
                    loader: 'style-loader',
                    options: {
                        insertAt:'top'
                    }
                }, 'css-loader',//@import
                'less-loader'//less -> css
                ]
            }
        ]
    }
}